<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮跳转图片</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script>
        var index = 1;
        function skip(flag){
            var img = document.getElementById("img");
            if(flag){
                index++;
                if (index == 6){
                    index=1;
                }
                img.src = "../img/demo3/"+index+".jpg";
            }else{
                index--;
                if (index < 1){
                    index =5;
                }
                img.src = "../img/demo3/"+index+".jpg"
            }
            document.getElementById("reminder").innerText = "当前为第"+index+"张";
        }
    </script>
</head>
<body>
    <input type="button" value="上一张" class="btn btn-info" onclick="skip(false)">
    <input type="button" value="下一张" class="btn btn-info" onclick="skip(true)"> <span id="reminder">当前为第1张</span><br/>
    <img src="../img/demo3/1.jpg" id="img">
</body>
</html>